<!--显示部门-->
<template>
     <el-container style="width:100%; height:750px;">
            <el-header>
                <el-row style="background-color: #001529">
                    <el-col :span="6"><div class="grid-content bg-purple">一嗨租车后台管理系统</div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple-light" style="color: #2fb9d4">&nbsp;{{gettime}}  </div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple" style="color: #2fb9d4">&nbsp;{{week}}</div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple-light">
                        <el-menu
                                :default-active="activeIndex2"
                                class="el-menu-demo"
                                mode="horizontal"
                                @select="handleSelect"
                                background-color="#001529"
                                text-color="#fff"
                                active-text-color="#ffd04b">

                            <el-submenu index="2">
                                <template slot="title">{{userName}}-{{realName}}</template>
                                <el-menu-item index="2-1">个人中心</el-menu-item>
                                <el-menu-item  index="2-2">切换账号</el-menu-item>
                                <el-menu-item index="2-3" @click="logout">退出</el-menu-item>
                            </el-submenu>
                            <el-menu-item index="4"><a href="/" target="_blank">首页</a></el-menu-item>
                        </el-menu>
                    </div></el-col>
                </el-row>
            </el-header>
            <el-container style="height: 500px;">
                <el-aside width="200px">
                    <img src="../assets/2.gif" class="userAvatar"
                         style="display: block;width: 80px;height: 80px;
                         border-radius: 50%;-webkit-border-radius: 50%;
                         -moz-border-radius: 50%;
                         border: 4px solid #44576b;box-sizing: border-box;margin: 10px auto 10px;">
                    <p style=" display: block;width: 100%;height: 25px;color: #ffffff;text-align: center;font-size: 12px;white-space: nowrap;line-height: 25px;overflow: hidden;">
                        你好！<span class="userName">{{realName}}</span>, 欢迎回来
                    </p>

                    <!--左侧树-->
                    <el-tree :data="data" :props="defaultProps"
                             default-expand-all
                             @node-click="handleNodeClick"></el-tree>
                </el-aside>
                <el-main style="width:600px;">
                      <!-- <defaultTag/> -->
                      <router-view/>
                </el-main>
            </el-container>
        </el-container>
</template>

<!--js-->
<script>
// import defaultTag from '@/views/defaultTag.vue';
// import DefaultTag from './defaultTag.vue';
 export default {
    data() {
      return {
                data:[],//树数据
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                //tabs 标签页
                editableTabsValue: '1',
                editableTabs: [{
                    title: '用户管理',
                    name: '1',
                    url: '/html/user/page.html'
                }],
                tabIndex: 1,
                activeIndex2:'1',
                gettime:'',//获取当前时间
                week:'',//星期几
                userInfo:{},
                userName:'',
                realName:'',
                headPic:'../assets/2.gif'
      };
    },
    components: {
       // defaultTag
    },
    created:function(){
        
      // this.$router.options.routes[1].children.push("/defaultTag");
         //动态菜单请求
         var userId = localStorage.getItem("userId");
             var userName = localStorage.getItem("userName");
              var loginName = localStorage.getItem("loginName");
              //this.headPic=localStorage.getItem("avatar");
              this.userName=userName;
              this.realName=loginName;
        // console.log(userId+"......userInfo........"+userName+","+loginName);

         this.$http.get("/ss/menu/queryMenuTreeByUserId?userId=1").then((response) => {
                 this.data=response.data.t;
              })
          //动态路由请求
          this.$http.get("/ss/menu/queryUrlIsNotNull").then((response) => {
                //alert(JSON.stringify(response.data.t)+".......333333333..........")
                 var dataJson  =  response.data.t;
                 if(dataJson!=null&&dataJson!=''){
                   var  routes=[];
                     //循环
                   dataJson.forEach(element => {
                    routes.push({path:element.url,name:element.menuName,component: () => import('@/components'+element.url+'.vue')});
                   });
                   //alert(JSON.stringify(routes))
                  // for (let i=0; i< dataJson.length;i++) {
                  //           routes.push({
                  //           //   path:menuList[i].url,
                  //           // name:menuList[i].menuName,
                  //           // component:() => import('@/views'+menuList[i].url+'.vue')
                  //            path: dataJson[i].url,
                  //            name: dataJson[i].menuName,
                  //            component: () => import('@/views'+dataJson[i].url+'.vue')
                  //           });
                  //    }
                      //给main追加子路由
                    this.$router.options.routes[0].children = routes;
                   //使路由生效
                   this.$router.addRoutes(this.$router.options.routes);
                 }
                
              })
               this.currentTime();
                this.getWeek();
    },
    methods: {
      handleNodeClick(data) {
        //console.log(data.url);
        if(data.url!=null&&data.url!=''&&data.url!='undefined'){
           this.$router.push(data.url);
        }
      }, //头部导航获取当前时间
                getTime:function(){
                    let currentDate  =new Date();
                    let yy = currentDate.getFullYear();
                    let mm = currentDate.getMonth()+1;
                    let dd = currentDate.getDate();
                    let hh = currentDate.getHours();
                    let mf = currentDate.getMinutes()<10 ? '0'+currentDate.getMinutes() : currentDate.getMinutes();
                    let ss = currentDate.getSeconds()<10 ? '0'+currentDate.getSeconds() : currentDate.getSeconds();
                    this.gettime = yy+'-'+mm+'-'+dd+' '+hh+':'+mf+':'+ss;
                },
                //每隔0.5秒调用getTime属性
                currentTime(){
                    setInterval(this.getTime,500)
                },
                //获取星期几
                getWeek(){
                    //java String   "abc".charAt(1)  返回某一个字符串"abc"1位置上的字符
                   //.getDay() 获取星期几的数字 0-6
                    //.getDate() 获取档期日期的每月第几天   2020-03-12  12
                    //console.log("星期"+new Date().getDay());
                    this.week='星期'+"日一二三四五六".charAt(new Date().getDay());
                },
                //导航栏处理方法
                handleSelect(key, keyPath) {
                    //console.log(key, keyPath);
                },
                //退出
                logout(){
                    localStorage.setItem("token","");
                    this.$router.push('/login');
                }
    }
  };
</script>
<!--css-->
<style>
    .el-header, .el-footer {
            background-color: #001529;
            color: #fff;
            text-align: center;
            line-height: 60px;
        }

        .el-aside {
            background-color: #324157;
            color: #333;
            text-align: center;
            line-height: 38px;
        }
        .el-tree{
            background-color: #324157;
            color: #fff;
        }
        .el-tree-node__content:hover{
           background-color: aqua
        };
        .el-tree-node__content:visited{
           background-color: aqua
        };
        .el-tree-node__content:active{
           background-color: aqua
        };
</style>
